<template>
  <div>
    <view
      class="target-wrap"
      @click="
        $u.route({
          url: '/pages/target/index',
        })
      "
    >
      <!-- <image
        class="target-wrap__icon"
        src="/static/image/home/target3.svg"
      ></image> -->
      <text class="target-wrap__text" v-if="remainDay === ''"
        >请设置一个考研年份作为目标吧!</text
      >
      <view class="flex remain" v-else>
        <view>距离考研还有</view>
        <view class="day">{{ remainDay }}</view>
        <view>天</view>
      </view>
    </view>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"

export default {
  mounted() {
    this.$store.dispatch("target/getUserTarget")
  },
  computed: {
    ...mapGetters("target", ["remainDay"]),
  },
}
</script>

<style scoped lang="scss">
.target-wrap {
  display: flex;

  margin-top: 40rpx;
  border-radius: 10px;
  padding: 0 30rpx;
  width: 100%;
  height: 120rpx;

  background: #ecf0f3;

  box-shadow: 6px 6px 12px #c2c2c6, -6px -6px 12px #ffffff;

  align-items: center;
  justify-content: center;
  &__icon {
    border-radius: 50px;
    width: 60rpx;
    height: 60rpx;

    background: linear-gradient(145deg, #ffffff, #dbdbde);

    box-shadow: 7px 7px 14px #cfcfd2, -7px -7px 14px #ffffff;
  }
  &__text {
    font-size: 32rpx;

    color: #95a5a6;
  }

  .remain {
    display: flex;

    font-size: 32rpx;
    letter-spacing: 1rpx;

    color: #95a5a6;

    align-items: center;
    justify-content: center;

    .day {
      margin: 0 10rpx;

      font-family: "score";
      font-size: 48rpx;
      text-align: center;
    }
  }
}
</style>
